<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jsPlumb/1.6.2/dom.jsPlumb.min.js"></script>
    <link rel="stylesheet" href="index.css">
    <title>Document</title>

</head>

<body>
    <div id="root">
        <div id="left">
            <div class="node" id="node1">流程1</div>
            <div class="node node2css" id="node2">流程2</div>
            <div class="node node3css" id="node3">流程3</div>
            <div class="node node4css" id="node4">流程4</div>
        </div>
        <div id="right">
            <h2>下方区域绘制流程图</h2>
            <div class="content" id="main"></div>
        </div>
    </div>
</body>

<script>
    $(function () {
        //设置左侧为可复制的
        $("#left").children().draggable({
            helper: "clone",
        });

        //设置右侧为拖拽存放区
        var i = 0;
        $("#main").droppable({

            drop: function (event, ui) {
                var left = parseInt(ui.offset.left - $(this).offset().left) + 268.78;
                var top = parseInt(ui.offset.top - $(this).offset().top) + 81;
                var name = ui.draggable[0].id;
                switch (name) {
                    case "node1":
                        i++;
                        var id = "state_start" + i;
                        $(this).append('<div class="node" style="position: absolute" id="' + id + '" >' + $(ui.helper).html() + '</div>');
                        $("#" + id).css("left", left).css("top", top);
                        jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
                        jsPlumb.draggable(id);
                        $("#" + id).draggable({ containment: "parent" });
                        doubleclick("#" + id);
                        break;
                    case "node2":
                        i++;
                        id = "state_flow" + i;
                        $(this).append("<div class='node node2css' style='position: absolute' id='" + id + "'>" + $(ui.helper).html() + "</div>");
                        $("#" + id).css("left", left).css("top", top);
                        jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, hollowCircle);
                        jsPlumb.draggable(id);
                        $("#" + id).draggable({ containment: "parent" });
                        doubleclick("#" + id);
                        break;
                    case "node3":
                        i++;
                        id = "state_decide" + i;
                        $(this).append("<div class='node node3css' style='position: absolute' id='" + id + "'>" + $(ui.helper).html() + "</div>");
                        $("#" + id).css("left", left).css("top", top);
                        jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, hollowCircle);
                        jsPlumb.draggable(id);
                        $("#" + id).draggable({ containment: "parent" });
                        doubleclick("#" + id);
                        break;
                    case "node4":
                        i++;
                        id = "state_end" + i;
                        $(this).append('<div class="node node4css" style=\'position: absolute\' id="' + id + '" >' + $(ui.helper).html() + '</div>');
                        $("#" + id).css("left", left).css("top", top);
                        jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
                        jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
                        jsPlumb.draggable(id);
                        $("#" + id).draggable({ containment: "parent" });
                        doubleclick("#" + id);
                        break;
                }
            }
        });

        //基本连接线样式
        var connectorPaintStyle = {
            lineWidth: 4,
            strokeStyle: "#61B7CF",
            joinstyle: "round",
            outlineColor: "white",
            outlineWidth: 2
        };
        // 鼠标悬浮在连接线上的样式
        var connectorHoverStyle = {
            lineWidth: 4,
            strokeStyle: "green",
            outlineWidth: 2,
            outlineColor: "white"
        };
        //端点的颜色样式
        var paintStyle = {
            strokeStyle: "#1e8151",
            fillStyle: "transparent",
            radius: 10,
            lineWidth: 6,
        }

        // 鼠标悬浮在端点上的样式
        var hoverPaintStyle = {
            outlineStroke: 'red',
        }

        //设置连接端点和连接线
         //设置连接端点和连接线
         var hollowCircle = {
            endpoint: ["Dot", { radius: 8 }],  //端点的形状
            connectorStyle: connectorPaintStyle,
            connectorHoverStyle: connectorHoverStyle,
            paintStyle: paintStyle,
            hoverPaintStyle: hoverPaintStyle ,
            isSource: true,    //是否可以拖动（作为连线起点）
            connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
            isTarget: true,    //是否可以放置（连线终点）
            maxConnections: 2,    // 设置连接点最多可以连接几条线
            connectorOverlays:[ "Arrow",
                ["Custom", {
                    create:function(component) {
                        return $("<select id='myDropDown'>" +
                            "<option value='one'>暂未审理</option>" +
                            "<option value='two'>通过</option>" +
                            "<option value='three'>驳回</option>" +
                            "</select>");
                    },
                    location:0.7,
                    id:"customOverlay",
                }]
            ]
        };

        //鼠标进入增加一个删除的小图标
        $("#main").on("mouseenter", ".node", function () {
            $(this).append('<img class="img" src="close.png"  style="position: absolute;" />');
            var widthnum = $(this).css("width").substr(0, 5);
            if (widthnum < 60) {
                $("img").css("left", 67).css("top", -13);
            } else {
                $("img").css("left", 167).css("top", -12);
            }
        });
        //鼠标离开小图标消失
        $("#main").on("mouseleave", ".node", function () {
            $("img").remove();
        });

        //节点小图标的单击事件
        $("#main").on("click", "img", function () {
            if (confirm("确定要删除此节点吗?")) {
                jsPlumb.removeAllEndpoints($(this).parent().attr("id"));
                $(this).parent().remove();
            }
        });

        //连接线的双击事件
        jsPlumb.bind("dblclick", function (conn, originalEvent) {
            if (confirm("确定删除此连线吗？"))
                jsPlumb.detach(conn);
        });

        jsPlumb.bind("click", function (conn, originalEvent) {
            console.log(`点击`);
        });

        //双击节点内容区域时的事件
        function doubleclick(id) {
            $(id).dblclick(function () {
                var text = $(this).text();
                $(this).html("");
                $(this).append("<input style='width: 130px' type='text' value='" + text + "' />");
                $(this).mouseleave(function () {
                    $(this).html($("input[type='text']").val());
                });
            });
        }
    })
</script>

</html>